<template>
	<view>
		<navNav :navobj="navobj"></navNav>
		<view class="balanceBox">
			<view class="backBox fontDingDIng">
				COIN
			</view>
			<view class="header">
				<view>
					<view class="title">账户余额</view>
					<view class="num fontDingDIng">{{balance.coin}}</view>
					<view class="flex_row_normal_center" style="margin-bottom: 10px;">
						<!-- <view class="title">冻结银币:</view> -->
						<view class="subNum fontDingDIng">{{balance.balance}}</view>
					</view>
				</view>
				<view @click="buy" class="button">充值</view>
			</view>
			<view class="line"></view>
			<view class="goldBox">
				<view class="labelBox">
					<view class="title " style="display: flex;align-items: center;justify-content: space-between">
						<view class="title">可提现余额</view>
						<view @click="chnagevisible()" class="takeOut">提现</view>
					</view>
					<view class="value fontDingDIng">{{balance.gold_coin || 0}}</view>
				</view>
				<view class="labelBox">
					<view class="title">冻结余额</view>
					<view class="value fontDingDIng">{{balance.frozenBal || 0}}</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="title">充值</view>
			<view class="orderList">
				<view class="item" @click="choosemoney(-1) " :class="actIndex === 0?'act':''">
					<input type="number" placeholder="输入金额" class="input" v-model="inputValue" />
					<view class="tip">自定义金额</view>
				</view>
				<view class="item" @click="choosemoney(index)" :class="actIndex === index+1 ?'act':''" v-for="(item,index) in list" :key="index">
					<view class="value">{{item.value}}</view>
				</view>
			</view>
		</view>
		<!-- 提现 -->
		<view v-show="visible">
			<view @click="clickMask" v-show="visible" style=" position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 750rpx;background: rgba(0,0,0,0.5);z-index:999;"></view>
		  <view style="z-index: 999;width: 750rpx;height: 800rpx;z-index:999;border-radius: 20rpx 20rpx 0 0;background-color: #fff; background-color: #fff;" :class="visible?'isactive':'none'" class="popup-content " >
         <view class="window">
         	<view class="title" >提现</view>
        
					<input style="border: 1rpx solid #eee;"  v-model="form.num" type="number" class="input" placeholder="提现金额"></input>
					<input style="border: 1rpx solid #eee;" v-model="form.account" class="input" placeholder="支付宝账号"></input>
					<input style="border: 1rpx solid #eee;" v-model="form.name" class="input" placeholder="支付宝账号实名"></input>
         
         	<view class="button" @click="withDraw()">提现</view>
         </view>
         
			</view>
		</view>
		<!-- 充值 -->
		<view v-show="visible2">
			<view @click="clickMask2" v-show="visible2" style=" position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 750rpx;background: rgba(0,0,0,0.5);z-index:999;"></view>
		  <view style="z-index: 999;width: 750rpx;height: 1200rpx;z-index:999;border-radius: 20rpx 20rpx 0 0;background-color: #fff; background-color: #fff;" :class="visible?'isactive':'none'" class="popup-content " >
		     <view class="htbox">
		     	<view class="timeBox">
		     		<view class="time">支付剩余时间:00:{{m}}:{{s}}</view>
		     	</view>
		     	<view class="title"><span style="font-size: 12px;">￥</span>{{form.amount || 0.00}}</view>
		     	<view class="checkBox">
		     		<view class="labelBox">
		     			<view class="label">
		     				<image class="img" mode="aspectFit"
		     					src="https://gd-hbimg.huaban.com/3b865314c9f832fa7ea6cf2ee89acc13894461778d14-EqVntA_fw658webp">
		     				</image>
		     				<view class="tips">微信支付</view>
		     			</view>
		     			<view class="check">
		     				<view class="act"></view>
		     			</view>
		     		</view>
		     	</view>
		     	<view class="button" @click="reCharge">支付</view>
		     </view>
		     
			</view>
		</view>
		
		<view class="buttonBox" @click="buy()">充值</view>
		
		
		
		
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	const {user,balance} = storeToRefs(userStores);//解构数据
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
				title:'我的余额',
				image:true
	})
	const visible=ref(false)
	const clickMask=()=>{
		visible.value = false
	}
	const visible2=ref(false)
	const clickMask2=()=>{
		visible2.value = false
	}
	const chnagevisible=()=>{
		visible.value= !visible.value
		console.log(	visible.value);
	}
	const chnagevisible2=()=>{
		visible2.value= !visible2.value
		console.log(	visible.value);
	}
	const actIndex = ref(0)
	
	const inputValue = ref('')
  const form = reactive({
		amount: 0,
		payWay:'2',
		wayCode:'WX_LITE'
	})
	const list = ref([
		{
			value:10
		},{
			value:20
		},{
			value:50
		},{
			value:100
		}
	])
	const m = ref(29)
	const s = ref(60)
	const timer = ref('')
	const data = ref({})
	const price = ref(0.00)
	const payment = ref('')
	const orderId = ref('')
	const lookid = ref('')

	
	onLoad((e)=>{
		
		const timer = setInterval(() => {
			s.value--
			if (s.value == 0) {
				s.value = 60
				m.value--
				if (m.value == 0) {
					clearInterval(timer)
				}
			}
		}, 1000)
	}) 
		
	const choosemoney=(e)=>{
		actIndex.value = e+1
	}
	
	const buy=()=>{
		chnagevisible2()
		if(actIndex.value === 0) {
			form.amount = inputValue.value
		}else{
			form.amount=list.value[actIndex.value-1].value
		}
		if(form.amount==''){
			uni.showToast({
				title:'请选择金额',
				icon:'none',
				duration:1000
			})
			return
		}		
	}
	const reCharge=async()=>{
		
		if(actIndex.value === 0) {
			form.amount = inputValue.value
		}else{
			form.amount=list.value[actIndex.value-1].value
		}
		const result = await proxy.$api.recharge(form)
		if(result.code==200){
			var data = {
				...JSON.parse(result.data.payData)
			}
			uni.requestPayment({
				provider: 'wxpay',
				nonceStr: data.nonceStr,
				package: data.package,
				paySign: data.paySign,
				signType: data.signType,
				timeStamp: data.timeStamp,
				success:(res)=> {
					uni.showToast({
						title:'充值成功',
						icon:'none'
					})
					
					userStores.getBalance()
					chnagevisible2()
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}
		
	}
	const getList=async()=>{
		var data = {
			page: page.value,
			page_size: 20
		}
		const result = await proxy.$api.getStatements(data)
		if(result.code==200){
			list.value = list.value.concat(result.data.statements)
			page.value++
		}
		
	}
	const withDraw=async()=> {
		chnagevisible()
		const result = await proxy.$api.withdraw(form)
		if(result.code==200){
			uni.showToast({
				title: '提现成功',
				icon: 'none'
			})
			form = {
				num: 0,
				name: '',
				account: ''
			}
			userStores.getBalance()
		}
	}

</script>

<style lang="scss" scoped>
	.popup-content {
		width: 750rpx;
		position: fixed;
		bottom: -200rpx;
		left: 0;
		background: #fff;
		// transform: translate3d(0, 100%, 0);
		transition: all 0.3s;
		z-index:999;
	}
	.isactive{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		// transition: transform  2s;
		transition: all 0.8s;
		z-index:999;
	}
	.htbox{
		width: 750rpx;height: 1000rpx;z-index:999;box-sizing: border-box;
		border-radius: 20rpx 20rpx 0 0;background-color: #fff;padding: 40rpx 30rpx;
		.timeBox {
			padding-top: 30px;
			display: flex;
			justify-content: center;
			color: $grey;
			font-size: 14px;
		}
		.checkBox {
			background-color: white;
			margin: 20px;
			padding: 20px;
			border-radius: 10px;
		
			.labelBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.label {
					display: flex;
					align-items: center;
		
					.tips {
						font-size: 14px;
						margin-left: 5px;
					}
		
					.img {
						width: 20px;
						height: 20px;
					}
				}
		
				.check {
					width: 12px;
					height: 12px;
					border-radius: 50%;
					border: 2px solid $grey;
					display: flex;
					align-items: center;
					justify-content: center;
		
					.act {
						border-radius: 50%;
						width: 8px;
						height: 8px;
						background-color: $grey;
					}
				}
			}
		}
		.button {
			position: fixed;
			bottom: 100rpx;
			left: 94rpx;
			width: 550rpx;
			border-radius: 50px;
			text-align: center;
			font-weight: bold;
			padding: 10px;
			color: white;
			background-color: dodgerblue;
		}
		.title {
			font-weight: bold;
			font-size: 25px;
			text-align: center;
			color: $red;
			margin: 5px 0px;
		}
		}
	.buttonBox{
		position: fixed;
		bottom: 0px;
		left: 0px;
		background: $linerBlue;
		color: white;
		margin: 20px;
		padding: 10px;
		width: calc(100% - 60px);
		text-align: center;
		border-radius: 20px;
	}
	
	.headerBox{
		position: sticky;
		top: 0px;
		left: 0px;
		background-color: white;
		z-index: +10;
	}
	
	.closeIcon {
		position: absolute;
		bottom: -50px;
		background-color: rgba(153, 153, 153, 0.7);
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		left: calc(50% - 15px);

		.icon {
			color: white !important;
			font-size: 20px !important;
		}
	}

	.window {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-weight: bold;margin-top: 30rpx;
		}
		.input{
			border: 1rpx solid #eee;margin-top: 30rpx;width: 500rpx;border-radius: 20rpx;height: 60rpx;
			padding-left: 20rpx;box-sizing: border-box;
		}
		

		.button {
			background-color: $blue;
			color: white;
			width: 400rpx;
			height: 80rpx;line-height: 80rpx;
			margin-top: 100rpx;
			text-align: center;
			border-radius: 20px;
			
		}
	}

	.listBox {
		padding: 20px;

		.title {
			font-weight: bold;
			margin-bottom: 10px;
		}
		
		.inputBox{
			border-bottom: 1px solid $shollowGrey;
			margin-bottom: 20px;
			.input{
				border: 1rpx solid #eee;
				padding-left: 20rpx;box-sizing: border-box;
			}
		}

		
		.orderList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			
			.act{
				border: 1px solid $blue !important;
			}
			
			.item{
				width: 48%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border: 1px solid $shollowGrey;
				margin-bottom: 10px;
				height: 60px;
				border-radius: 5px;
				
				.tip{
					font-size: 12px;
					color: $grey;
				}
				
				.input{
					width: 60%;
					text-align: center;
				}
				
				.time{
					font-size: 13px;
					color: $grey;
				}
				.name{
					font-weight: bold;
					font-size: 15px;
				}
				.right{
					.num{
						font-size: 14px;
					}
				}
			}
		}
	}

	.balanceBox {
		background: $linerBlue;
		margin: 10px 20px;
		padding: 20px 30px;
		border-radius: 10px;
		position: relative;

		.goldBox {
			display: flex;
			justify-content: space-between;
			padding: 10px 0px;
			padding-bottom: 0px;

			.labelBox {
				width: 50%;

				.title {
					color: white;
					font-size: 14px;

					.takeOut {
						background-color: white;
						color: black;
						margin-right: 10px;
						padding: 2px 10px;
						border-radius: 20px;
						font-weight: bold;
						font-size: 12px;
					}
				}

				.value {
					color: white;
					font-weight: bold;
					margin-top: 5px;
					font-size: 18px;
				}
			}
		}

		.line {
			height: 1px;
			background-color: rgba(255, 255, 255, 0.2);
		}

		.backBox {
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			font-size: 75px;
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.button {
				background-color: white;
				color: $blue;
				padding: 5px 20px;
				border-radius: 20px;
				font-weight: bold;
			}

			.title {
				color: white;
				font-size: 15px;
			}

			.num {
				color: white;
				font-size: 25px;
				font-weight: bold;
				margin: 10px 0px;
			}

			.subNum {
				font-size: 16px;
				color: white;
				font-weight: bold;
			}
		}
	}
</style>